function Banner(){}

$.extend( Banner.prototype , {
    init : function(){
        console.log("i am banner");
       

        this.slide = $(".slide");
        this.carousel_inner = $(".carousel-inner");
        // this.carousel = $(".carousel");
        this.glyphicon_right = $(".glyphicon-chevron-right");
        this.glyphicon_left  = $(".glyphicon-chevron-left");
        this.prev = $(".slide .left");
        this.next = $(".slide .right"); 

        this.pages = $(".carousel-indicators");
        
        this.slide.on("mouseenter" ,$.proxy(this.showGlyphicon,this));
        this.slide.on("mouseleave" ,$.proxy(this.noneGlyphicon,this));
        this.prev.on("click",$.proxy(this.prevCarousel,this));
        this.next.on("click",$.proxy(this.nextCarousel,this));
        this.pages.on("click","li",$.proxy(this.changeCarousel,this));
        this.index = 0;
        this.carouselFa();
        setInterval($.proxy(function(){
            this.index ++ ;
            if(this.index >5) this.index =0;
            this.carouselFa();
        },this),3000)
    },
    //显示左右键
    showGlyphicon : function(){     
        this.glyphicon_left.animate({
            left : 160
        })
        this.glyphicon_right.animate({
            right : 160
        })
    } ,
    //取消左右键
    noneGlyphicon : function(){      
        this.glyphicon_left.animate({
            left : -20
        })
        this.glyphicon_right.animate({
            right : -20
        })
    },
    //轮播图
    carouselFa : function(){   
        var children = this.carousel_inner.children();
        var pages    = this.pages.children();
        var flag = false;
        for(var attr = 0 ;attr < children.length;attr ++ )
        {
            // console.log($(children[attr]).attr("data-id") == this.index)
            if($(children[attr]).attr("data-id") == this.index){
                flag = true;
            }
            $(children[attr]).removeClass("active");
            $(pages[attr]).removeClass("active");
        }
        if(flag) {
            $(children[this.index]).addClass("active");
            $(pages[this.index]).addClass("active");
        }
    },
    prevCarousel : function(){
        this.index --;
        if(this.index < 0) this.index = 5;
        this.carouselFa();
    },
    nextCarousel : function(){
        
        this.index ++;
        if(this.index >5) this.index = 0;
       
        this.carouselFa();
    },
    changeCarousel : function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;    
        this.index = $(target).attr("data-slide-to");
        this.carouselFa();
    }
})

export default new Banner();